﻿@page "/datetimeranges"

<h3>DateTimeRange 日期时间段选择器</h3>

<h4>在同一个选择器里选择一段日期</h4>

<Block Title="基本功能" Introduction="以「日」为基本单位，选择一段时间" CodeFile="datetimerange.1.html">
    <DateTimeRange @bind-Value="@DateTimeRangeValue1" OnConfirm="OnConfirm" />
    <Logger @ref="DateLogger" class="mt-3" />
</Block>

<Block Title="数据双向绑定" Introduction="点击确认按钮时间选择框值与文本框值一致" CodeFile="datetimerange.2.html">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-12 col-sm-6">
                <DateTimeRange @bind-Value="@DateTimeRangeValue2" />
            </div>
            <div class="form-group col-12 col-sm-6">
                <div>
                    @if (DateTimeRangeValue2.Start != DateTime.MinValue)
                    {
                        <span>时间范围：</span> @DateTimeRangeValue2.Start.ToString("yyyy-MM-dd");
                    }
                    @if (DateTimeRangeValue2.End != DateTime.MinValue)
                    {
                        <span> - </span> @DateTimeRangeValue2.End.ToString("yyyy-MM-dd");
                    }
                </div>
            </div>
        </div>
    </div>
</Block>

<Block Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止输入" CodeFile="datetimerange.3.html">
    <div class="form-inline">
        <div class="row">
            <div class="col-12">
                <DateTimeRange Value="@DateTimeRangeValue3" IsDisabled="true" />
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />
